<!DOCTYPE html>
<html>
<head>
 <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <style type="text/css">
      html { height: 100% }
      body { height: 100%; margin: 0; padding: 0 }
      #map_canvas { height: 100% }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?key=AIzaSyC2aHGtS75OgEGKCeAMnEM4T8jMWHk5osA&sensor=false">
    </script>
    
    <script type="text/javascript">
    //get the user's most current location, 
    //using it to initialize the google map that centred at that geolocatin
    //
    var marker;
    function initialize() {
		var lat=0;
		var lng=0;
		//get user's most recently location from andorid device
		if(window.android){
			lat=window.android.getLatitude();
			lng=window.android.getLongitude();
		}
		//setting mapOption
        var mapOptions = {
          //center: new google.maps.LatLng(-34.397, 150.644),
          center: new google.maps.LatLng(lat, lng),          
          zoom: 14,
          mapTypeId: google.maps.MapTypeId.ROADMAP
        };
        //create a map
        var map = new google.maps.Map(document.getElementById("map_canvas"),
            mapOptions);
        //
        google.maps.event.addListener(map, 'click', function(e) {
            placeMarker(e.latLng, map);
          });
          
        google.maps.event.addListener(marker, 'tap', function() {
        	this.setMap(null);

  		});

        
      }
//     
    //place a marker in a given position on the map
      function placeMarker(position, map) {
      	  marker = new google.maps.Marker({
      	    position: position,
      	    map: map
      	  });
      		map.panTo(position);
      }

  google.maps.event.addDomListener(window, 'load', initialize);

    </script>

</head>

<body onload="initialize()">
<div id="map_canvas" style="width:100%; height:100%">

</div>

</body>
</html>